<template>
	<div class="nav">
		<ul class="uk-nav uk-hidden-small" :style="{textAlign:textAlign}">
			<li v-for="(item,index) in list" :key="index">
				<router-link :to="item.url" v-if="item.url">{{item.name}}</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
  name: 'YRList',
  props: {
	textAlign:String,
	list:{
		type: Array,
		default: () => []
	}
  }
}
</script>

<style scoped="scoped">
.nav,.nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav ul>li {
    border-top: 1px solid #eee;
    position: relative;
}
.nav ul>li>a{
	padding: 10px 10px;
	color: #888;
	-moz-transition: all .2s ease-in;
	-webkit-transition: all .2s ease-in;
	-o-transition: all .2s ease-in;
	-ms-transition: all .2s ease-in;
	transition: all .2s ease-in;
	display: block;
	text-decoration: none;
}
.nav ul>li>a:hover {
    background: #a6d595;
	opacity: .7;
    color: #FFF!important;
    text-shadow: none!important;
}
</style>
